<template>
  <div class="hot-container">
    <home-content title="热门课程">
      <el-row>
        <el-col>
          <h1>热门学科排名</h1>
          <el-date-picker
            v-model="date"
            type="week"
            format="yyyy 第 WW 周"
            placeholder="选择周"
            @change="resetTime"
          ></el-date-picker>
        </el-col>
      </el-row>
      <el-row class="middle">
        <el-col>
          <div class="hbar">
            <chart-area
              v-if="subjectRank.valueList.length > 0 "
              :x-data="subjectRank.nameList"
              :chart-data="subjectRank.valueList"
              type="hbar"
            ></chart-area>
          </div>
          <div class="bar">
            <chart-area
              v-if="subjectRank.valueList.length > 0 "
              :x-data="subjectRank.nameList"
              :chart-data="subjectRank.valueList"
              type="bar"
              :xAxisRotate="true"
            ></chart-area>
          </div>
        </el-col>
      </el-row>
    </home-content>
    <div class="bottom">
      <el-row :gutter="30">
        <el-col :span="8">
          <el-card class="box-card">
            <div slot="header" class="header clearfix">
              <span>互联网产品 TOP5</span>
            </div>
            <el-table
              :header-cell-style="{ 'background-color': '#f2f2f2','font-weight':600,'color':'#686868' }"
              border
              :data="webTop5"
              size="small"
            >
              <el-table-column align="center" type="index" label="排序"></el-table-column>
              <el-table-column align="center" prop="courseName" label="热门课程">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="$router.push('/hot/course/'+ scope.row.courseId)"
                  >{{ scope.row.courseName }}</el-button>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="userNum" label="用户数"></el-table-column>
              <el-table-column align="center" prop="weekPercent" label="涨幅"></el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card">
            <div slot="header" class="header clearfix">
              <span>Java TOP5</span>
            </div>
            <el-table
              :header-cell-style="{ 'background-color': '#f2f2f2','font-weight':600,'color':'#686868' }"
              border
              :data="javaTop5"
              size="small"
            >
              <el-table-column align="center" type="index" label="排序"></el-table-column>
              <el-table-column align="center" prop="courseName" label="热门课程">
                <template slot-scope="scope">
                  <el-button
                    @click="$router.push('/hot/course/'+ scope.row.courseId)"
                    type="text"
                  >{{ scope.row.courseName }}</el-button>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="userNum" label="用户数"></el-table-column>
              <el-table-column align="center" prop="weekPercent" label="涨幅"></el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card">
            <div slot="header" class="header clearfix">
              <span>UI设计 TOP5</span>
            </div>
            <el-table
              :header-cell-style="{ 'background-color': '#f2f2f2','font-weight':600,'color':'#686868' }"
              border
              :data="uiTop5"
              size="small"
            >
              <el-table-column align="center" type="index" label="排序"></el-table-column>
              <el-table-column align="center" prop="courseName" label="热门课程">
                <template slot-scope="scope">
                  <el-button
                    @click="$router.push('/course/'+ scope.row.courseId)"
                    type="text"
                  >{{ scope.row.courseName }}</el-button>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="userNum" label="用户数"></el-table-column>
              <el-table-column align="center" prop="weekPercent" label="涨幅"></el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import HomeContent from "@/components/HomeContent.vue";
import ChartArea from "@/components/ChartArea.vue";
import request from "@/utils/request";
import { getHotSubjectData, getTop5 } from "@/utils/getChartsData";
export default {
  name: "Hot",
  components: {
    "home-content": HomeContent,
    "chart-area": ChartArea
  },
  data() {
    return {
      date: new Date(),
      subjectRank: {
        nameList: [],
        valueList: []
      },
      webTop5: [],
      javaTop5: [],
      uiTop5: []
    };
  },
  created() {
    this.initSubjectRank();
    this.getWebTop5();
    this.getJavaTop5();
    this.getUITop5();
  },
  methods: {
    async initSubjectRank() {
      const result = await getHotSubjectData({
        datePickerSel: this.getPickerSel(),
        type: "year/month/week"
      });
      this.subjectRank.nameList = result.xlist;
      this.subjectRank.valueList = result.ylist;
    },
    async getWebTop5() {
      this.webTop5 = await getTop5();
    },
    async getJavaTop5() {
      this.javaTop5 = await getTop5();
    },
    async getUITop5() {
      this.uiTop5 = await getTop5();
    },
    getPickerSel(date) {
      if (!date) {
        date = new Date();
      }
      let week = this.$dayjs(date).week();
      let year = this.$dayjs(date).format("YYYY");
      return `${year}/${this.$dayjs(date).format("YYYY-MM")}/${year}-${week}`;
    },
    resetTime() {
      this.initSubjectRank();
    }
  }
};
</script>

<style lang='less' scoped>
.hot-container {
  .el-col {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .middle {
    margin-top: 20px;
    .bar,
    .hbar {
      height: 730px;
      width: 50%;
    }
    .hbar {
      margin-right: 10px;
    }
    .bar {
      margin-left: 10px;
    }
  }
  .el-card {
    width: 100%;
    /deep/ .el-card__header {
      border: 0;
    }
  }
  .bottom {
    margin-top: 60px;
  }
  .header {
    font-size: 18px;
    font-weight: 600;
    color: rgba(102, 102, 102, 1);
    line-height: 25px;
  }
  .el-table {
    border-radius: 5px;
  }
}
</style>